<template>
      <div>
        <div class="bg-white shadow-1">
          <div class="row">
              <q-icon title="展开" v-show="!visible" name="fa fa-plus-square"  @click="visible=!visible" style="width:36px;height:36px;font-size:15px;"></q-icon>
              <q-icon title="收起"  v-show="visible" name="fa fa-minus-square"  @click="visible=!visible"  style="width:36px;height:36px;font-size:15px;"></q-icon>
              <q-tabs
                v-model="tab"
                dense
                class="text-grey-9 row-10"
                inline-label
                align="left">
                <q-tab name="tab-1">基本数据</q-tab>
              </q-tabs>
          </div>
          <q-tab-panels v-model="tab" animated  v-show="visible">
            <q-tab-panel name="tab-1">
              <div class="row q-col-gutter-sm">
                  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div :class="$v.addOrEditForm.code.$error?'text-negative': ''">编码</div>
                      <q-input
                      v-model="addOrEditForm.code"
                      error-message="该字段为必填项"
                      :error="$v.addOrEditForm.code.$error"
                      @blur="$v.addOrEditForm.code.$touch"
                      dense hint/>
                  </div>
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div :class="$v.addOrEditForm.name.$error?'text-negative': ''">名称</div>
                      <q-input
                      v-model="addOrEditForm.name"
                      error-message="该字段为必填项"
                      :error="$v.addOrEditForm.name.$error"
                      @blur="$v.addOrEditForm.name.$touch"
                      dense hint/>
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div>英文名称</div>
                      <q-input
                      v-model="addOrEditForm.nameEn"
                      dense hint/>
                    </div>
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div>说明</div>
                      <q-input
                      type="textarea"
                      v-model="addOrEditForm.remark"
                      dense hint/>
                  </div>
                <q-btn dense color="light-blue" :label="$t('保存')" style="margin-right:10px;" @click="save"/>
              </div>
            </q-tab-panel>
          </q-tab-panels>
        </div>
        <div style="margin-top:20px;" class="bg-white shadow-1">
          <q-tabs
            v-model="tab2"
            dense
            class="text-grey-9"
            inline-label
            align="left">
            <q-tab name="tab-2-1">基本视图</q-tab>
            <q-tab name="tab-2-2">采购视图</q-tab>
            <q-tab name="tab-2-3">成本试图</q-tab>
          </q-tabs>
          <q-tab-panels v-model="tab2" animated>
            <q-tab-panel name="tab-2-1" class="no-shadow q-pa-sm">
                 <q-list bordered class="rounded-borders no-shadow">
                    <q-expansion-item
                      switch-toggle-side
                      expand-separator
                      label="一般数据"
                      default-opened
                    >
                    <q-separator />
                      <q-card>
                        <q-card-section>
                          <div class="row q-col-gutter-sm">
                            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                              <div :class="$v.commonlyEditForm.code.$error?'text-negative': ''">基本计量单位:</div>
                                <q-input
                                v-model="commonlyEditForm.code"
                                error-message="该字段为必填项"
                                :error="$v.commonlyEditForm.code.$error"
                                @blur="$v.commonlyEditForm.code.$touch"
                                dense hint/>
                              </div>
                              <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                              <div :class="$v.commonlyEditForm.status.$error?'text-negative': ''">工作状态:</div>
                                <q-input
                                v-model="commonlyEditForm.status"
                                error-message="该字段为必填项"
                                :error="$v.commonlyEditForm.status.$error"
                                @blur="$v.commonlyEditForm.status.$touch"
                                dense hint/>
                              </div>
                          </div>
                          <q-btn dense color="light-blue" :label="$t('保存')" style="margin-right:10px;"/>
                        </q-card-section>
                      </q-card>
                    </q-expansion-item>

                    <q-expansion-item
                      switch-toggle-side
                      expand-separator
                      label="UNSPSC"
                    >
                    <q-separator />
                      <q-card>
                        <q-card-section>
                           <div class="row q-col-gutter-sm">
                            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                              <div :class="$v.classificationForm.segement.$error?'text-negative': ''">区分:</div>
                                <q-input
                                v-model="classificationForm.segement"
                                error-message="该字段为必填项"
                                :error="$v.classificationForm.segement.$error"
                                @blur="$v.classificationForm.segement.$touch"
                                dense hint/>
                              </div>
                              <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                <div :class="$v.classificationForm.class.$error?'text-negative': ''">门类:</div>
                                <q-input
                                v-model="classificationForm.class"
                                error-message="该字段为必填项"
                                :error="$v.classificationForm.class.$error"
                                @blur="$v.classificationForm.class.$touch"
                                dense hint/>
                              </div>
                              <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                <div :class="$v.classificationForm.family.$error?'text-negative': ''">系别:</div>
                                <q-input
                                v-model="classificationForm.family"
                                error-message="该字段为必填项"
                                :error="$v.classificationForm.family.$error"
                                @blur="$v.classificationForm.family.$touch"
                                dense hint/>
                              </div>
                              <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                <div :class="$v.classificationForm.commodity.$error?'text-negative': ''">商品:</div>
                                <q-input
                                v-model="classificationForm.commodity"
                                error-message="该字段为必填项"
                                :error="$v.classificationForm.commodity.$error"
                                @blur="$v.classificationForm.commodity.$touch"
                                dense hint/>
                              </div>
                          </div>
                          <q-btn dense color="light-blue" :label="$t('保存')" style="margin-right:10px;"/>
                        </q-card-section>
                      </q-card>
                    </q-expansion-item>
                    <q-expansion-item
                      switch-toggle-side
                      expand-separator
                      label="主品类数据"
                    >
                    <q-separator />
                      <q-card>
                        <q-card-section>
                          <q-tree
                          class="col-lg-8 col-md-8 col-sm-12 col-xs-12"
                          ref="qtree"
                          style=""
                          :nodes="category"
                          :tick-strategy="tickType"
                          color="primary"
                          :filter="filter"
                          node-key="id"
                          :ticked.sync="ticked"
                          :selected.sync="selecteds"
                          @update:ticked="tickeds"
                          label-key="name"></q-tree>
                        </q-card-section>
                      </q-card>
                    </q-expansion-item>
                  </q-list>
            </q-tab-panel>
          </q-tab-panels>
        </div>
      </div>
</template>

<script>
import { transformToTreeFormat } from 'src/utils/fns.js'
import { required } from 'vuelidate/lib/validators'
// import CategoryTree from 'pages/Mdm/Job/JobMain/CategoryTree.vue'
// import SelectTree from 'pages/Mdm/Job/JobMain/SelectTree.vue'
export default {
  name: 'addjob',
  // components: {
  //   CategoryTree,
  //   SelectTree
  // },
  data () {
    return {
      // 树节点
      category: [],
      categoryName: '',
      must: false,
      ticked: [],
      selecteds: '',
      tickType: 'strict',
      filter: '',
      visible: true,
      tab: 'tab-1',
      tabs: 'tab-1',
      tab2: 'tab-2-1',
      tab3: 'tab-1',
      disable: true,
      addEdit: 1,
      // 基本信息
      addOrEditForm: {
        code: '',
        name: '',
        nameEn: '',
        remark: ''
      },
      searchToggle: false,
      searchForm: {
        name: '',
        code: '',
        createTime: ''
      },
      selected: [],
      visibleColumns: [
        'action',
        'name',
        'code',
        'createTime'
      ],
      // 当加入 required: true 属性时  visibleColumns 对当前字段无效
      columns: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'name', required: true, label: '资质名称', align: 'left', field: 'name', sortable: true },
        { name: 'code', required: true, label: '资质编码', align: 'left', field: 'code', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      columns1: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'name', required: true, label: '地点名称1', align: 'left', field: 'name', sortable: true },
        { name: 'name2', required: true, label: '地点名称2', align: 'left', field: 'name2', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      columns2: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'name', required: true, label: '结算方式', align: 'left', field: 'name', sortable: true },
        { name: 'name2', required: true, label: '结算货币', align: 'left', field: 'name2', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      data: [
        {
          name: '教师资格证',
          nameEn: 'teacher'
        }
      ],
      data2: [
        {
          name: '天',
          name2: '人民币',
          createTime: '2017-4-3 15:00:00'
        }
      ],
      data1: [
        {
          name: '地点一',
          name2: 'one'
        }
      ],
      // 基本视图 一般数据
      commonlyEditForm: {
        code: '',
        name: ''
      },
      classificationForm: {
        family: '',
        class: '',
        segement: '',
        commodity: ''
      },
      total: 0,
      pagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      }
    }
  },
  computed: {
    pages () {
      return Math.ceil(this.total / this.pagination.rowsPerPage)
    }
  },
  validations: {
    addOrEditForm: {
      name: { required },
      code: { required }
    },
    // 基本视图中的一般数据
    commonlyEditForm: {
      code: { required },
      status: { required }
    },
    // 基本视图中的unspsc
    classificationForm: {
      family: { required },
      class: { required },
      segement: { required },
      commodity: { required }
    }
  },
  watch: {
    'pagination.page' () {
      this.listGet({
        pagination: this.pagination,
        filter: this.searchForm
      })
    }
  },
  created () {
    this.addEdit = this.$route.params.addEdit
    this.init()
    this.getTree()
  },
  methods: {
    // 配置资质
    toConfigure () {
      this.$router.push({
        name: 'addqualifications',
        params: {
          addEdit: this.addEdit
        }
      })
    },
    // 保存基本信息
    save () {
      this.disable = false
      this.tab = 'tab-2'
      this.$router.push({
        name: 'addjob'
      })
    },
    // 获取选择品类
    categoryes (data) {
      console.log(data)
    },
    // 获取选择unspsc
    unspsc (data) {
      console.log(data)
    },
    // 获取工作
    init () {
      this.listGet({
        pagination: this.pagination,
        filter: this.searchForm
      })
    },
    // 获取品类树
    // 树过滤
    myFilterMethod (node, filter) {
      const filt = filter.toLowerCase()
      return node.name && node.name.toLowerCase().indexOf(filt) > -1 && node.toLowerCase().indexOf('(*)') > -1
    },
    resetFilter () {
      this.filter = ''
      this.$refs.filter.focus()
    },
    // 单选
    tickeds (ticked) {
      if (ticked.length > 1) {
        this.ticked = [ticked[1]]
      }
    },
    async getTree () {
      await this.$api({
        method: 'post',
        url: '/mdm/category/query',
        params: {
          categoryTypeId: 'de421fad3eaa4b16b236a30e0b4ce8d8'
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let datas = data
          let categorys = transformToTreeFormat(datas, 'id', 'parentId', 'children')
          this.category = categorys
        },
        errorCallback (err) {
          console.log('未处理的业务级error: ', err)
        }
      })
    },
    async listGet (props) {
    //   let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
    //   await this.$api({
    //     method: 'post',
    //     url: '/mdm/site/query',
    //     params: {
    //       pageNo: page,
    //       pageSize: rowsPerPage,
    //       sort: sortBy,
    //       order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
    //       ...filter
    //     },
    //     emulateJSON: true,
    //     useLoadLayer: true,
    //     successCallback: ({ data }) => {
    //       this.total = data.total
    //       this.data = data.list
    //     },
    //     errorCallback (err) {
    //       console.log('未处理的业务级error：', err)
    //     }
    //   })
    //   this.pagination.page = page
    //   this.pagination.rowsPerPage = rowsPerPage
    //   this.pagination.sortBy = sortBy
    //   this.pagination.descending = descending
    }
  }
}
</script>

<style lang="stylus" scoped>
  .q-table__container
    box-shadow none
  .q-table--bordered
    border none
</style>
